<template>
  <div class="container">        
    <swiper
      class="swiper"
      indicator-dots="true"
      autoplay="true"
      interval="5000"
      duration="1000"
      :style="{ height: bannerHeight + 'px' }"
    >
      <block v-for="(slide, index) in slides" :index="index" :key="key">
        <block v-for="(item, slideindex) in slide.items" :index="slideindex" :key="key">
          <swiper-item>
            <image :src="item.image" class="slide-image" mode="widthFix" @load="imageLoad" />
          </swiper-item>
        </block>
      </block>
    </swiper>

    <i-tabs :current="current_scroll" scroll @change="handleChangeScroll">
      <block v-for="(item, index) in categories" :index="index" :key="key">
        <i-tab :key="'tab'+ (index+1)" :title="item.name" @click="tabTap(item.id)" :id="item.id"></i-tab>
      </block>
    </i-tabs>
    <block v-for="(item, index) in categories" :index="index" :key="key">
      <div class="right-item" :class="current_scroll == 'tab'+ (index+1) ? 'active' :'' ">
        <test-list v-for="(post, postindex) in artiList" :key="postindex" :item="post"></test-list>
      </div>
    </block>
    <i-toast id="toast" />
  </div>
  
</template>

<script>
// 导入 click-counter 组件
import ClickCounter from "@/components/click-counter";
import TestList from "@/components/test-list";
const { $Toast } = require('../../../static/iview/base/index');

export default {
  // 声明在当前组件下使用 counter-click 组件
  components: { ClickCounter, TestList },

  data() {
    return {
      msg: "Hello",
      indicatorDots: false,
      autoplay: false,
      interval: 5000,
      duration: 1000,
      slides: [],
      artiList: [],
      current_scroll: "tab1",
      isActive: false,
      classObject: {
        active: true,
        "text-danger": false
      },
      categories: [],
      tab: "tab",
      bannerHeight: 200,
      page:1,
      total_page:0,
      category_curr:2,
      server_url:'https://jinrigaoling.com/',
      // server_url:'http://cmf5pro.cn/',
      pull:0
    };
  },
  create() {
    
    
  },
  mounted() {    
    console.log(process.env);
    // this.isActive =  this.current_scroll== "tab1" ? true:false;    
    this.getList()
    wx.request({
      url:
        this.server_url+"api/portal/Categories/subCategories/category_id/1",
      success: res => {
        this.categories = res.data.data.categories;
        console.log(this.categories);
      }
    });

    // 获取幻灯片
    wx.request({
      url: this.server_url+"api/home/slides/1",
      success: res => {
        this.slides = res.data.data;
        console.log(this.slides);
      }
    });
    wx.showShareMenu();
    console.log('mount')
  },
  methods: {    
    getList() {
      const that = this 
          wx.request({
            url:
              // "https://jinrigaoling.com/api/portal/Lists/getCategoryPostLists/category_id/2",
              this.server_url+"api/portal/Lists/getCategoryPostLists/category_id/2/is_video/5",
              // this.server_url+"http://zugongju.cn/api/portal/Lists/getCategoryPostLists/category_id/2",
            success: res => {
              if (that.page > 1) {
                  // 数据追加                  
                  that.artiList.concat(res.data.data.list)                  
                } else {
                  // 数据
                  that.artiList = res.data.data.list;            
                }
              that.total_page = res.data.data.total_page
              console.log('page:'+that.total_page);
            }
          });
    },
    getList1() {
      const that = this 
          wx.request({
            url:
              // "https://jinrigaoling.com/api/portal/Lists/getCategoryPostLists/category_id/2",
              this.server_url+"api/portal/Lists/getCategoryPostLists/category_id/"+that.category_curr+'/page/'+that.page+'/is_video/5',
            success: res => {
              if (that.page > 1) {
                  // 数据追加                  
                 that.artiList = that.artiList.concat(res.data.data.list)
                  console.log('当前'+that.page)
                  console.log(res.data.data.list)
                } else {
                  // 数据
                  that.artiList = res.data.data.list;            
                }
              that.total_page = res.data.data.total_page
              console.log('page:'+that.total_page);
            }
          });
          if(this.pull==1){
            wx.stopPullDownRefresh()
            this.pull=0
          }
    },
    clickHandle() {
      this.msg = "Clicked!!!!!!";
    },
    handleChangeScroll(detail) {
      this.current_scroll = detail.mp.detail.key;
    },
    tabTap(id) {      
      this.category_curr = id      
      wx.request({
        url:
          // "https://jinrigaoling.com/api/portal/Lists/getCategoryPostLists/category_id/" +
          // e.target.id,
          this.server_url+"api/portal/Lists/getCategoryPostLists/category_id/"+
          id+'/is_video/5',
        success: res => {          
          this.artiList = res.data.data.list;
          console.log(this.artiList);
          this.page=0;
          this.total_page = res.data.data.total_page
          console.log('click=page:'+this.total_page);
        }
      });      
    },
    imageLoad(e) {
      var res = wx.getSystemInfoSync();
      var imgwidth = e.mp.detail.width,
        imgheight = e.mp.detail.height,
        ratio = imgwidth / imgheight;
      this.bannerHeight = res.windowWidth / ratio
    }
  },
  computed: {
    classObject: function() {
      return {
        active: true
      };
    }
  },
  onReachBottom () {
    if (this.page > this.total_page) {
      console.log('数据加载完了')
      $Toast({
            content: '数据加载完了',
            icon: 'prompt_fill',
        });
    } else {
      // 下一页
      this.page = this.page + 1
      this.getList1()
    }
  },
  onPullDownRefresh(){
    this.pull=1
    this.page = 1
    this.getList1()
  }
  
};
</script>

<style scoped>
.container {
  background: fefefe;
}
.swiper {
  width: 100%;
}
.slide-image{
  width: 100%;
}
.message {
  color: red;
  padding: 10px;
  text-align: center;
}
.right-item {
  display: none;
}
.active {
  display: block;
}
</style>